import { mapGetters } from 'vuex'
export default {
  props: {
    portStatus: {
      type: Object,
      default: () => {}
    },
    rowData: {
      type: Object,
      default: () => {}
    },
    faceList: {
      type: Array,
      default: () => []
    },
    showPort: {
      type: Boolean,
      default: false
    },
    modelType: { // 存在图片的设备类型
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showImg: true,
      newfaceList: [],
      page: 1,
      size: 2,
      selectedPort: {},
      imgData: {
        '192': '/afsDevice/AFS-A-192-double.png',
        '96': '/afsDevice/AFS-A-96-single.png',
        '48': '/afsDevice/AFS-A-48-single.png',
        '24': '/afsDevice/AFS-B-24-double.png',
        '12': '/afsDevice/AFS-12-single.png'
      }
    }
  },
  computed: {
    ...mapGetters(['regionTree', 'dictList', 'getTheme']),
    deviceImg() {
      // this.$config.resUrl +
      return this.$config.resUrl + '/afsDevice/' + this.modelType + '.png?t=' + new Date().getTime()
    }
  },
  watch: {
    showPort: {
      handler(newVal, oldVal) {
        this.showImg = newVal
      },
      immediate: true
    },
    faceList(val) {
      if (val.length) {
        this.newfaceList = this.faceList.slice(0, this.size)
        this.$nextTick(() => {
          this.observerfn()
        })
      }
    }
  },
  mounted() {
    if (this.faceList.length) {
      this.newfaceList = this.faceList.slice(0, this.size)
      this.$nextTick(() => {
        this.observerfn()
      })
    }
  },
  beforeDestroy() {
    // 关闭观察器
    this.observer && this.observer.disconnect()
    this.observer = null
  },
  methods: {
    observerfn() {
      const root = document.querySelector('.port-box')
      this.observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          const arr = this.faceList.slice(this.page * this.size, (this.page + 1) * this.size)
          this.page++
          this.newfaceList = this.newfaceList.concat(arr)
        }
      }, {
        root: root,
        threshold: 0
      })
      const portItems = document.querySelector('.loadmore')
      this.observer.observe(portItems)
    },
    showPortTab() {
      this.showImg = false
      this.$emit('showPortTab')
    },
    getShowImg() {
      return this.showImg
    },
    portClick(portData) {
      if (!portData) return
      const selected = !portData.selected
      if (selected) {
        if (this.selectedPort) this.selectedPort.selected = false
        portData.selected = true
        this.selectedPort = portData
      } else {
        portData.selected = false
        this.selectedPort = null
      }
      this.$emit('portClick', this.selectedPort)
    },
    getImg(portData) {
      if (portData.selected ||
        (this.selectedPort &&
           this.selectedPort.connPortId === portData.portInfo.portId)) {
        return require('@/assets/img/port_status/selected.png')
      } else {
        return portData.portInfo.status === 'IDLE'
          ? (this.getTheme === 'dark-theme' ? require('@/assets/img/port_status/idle.png') : require('@/assets/img/port_status/light_idle.png'))
          : this.portStatus[portData.portInfo.status].img
      }
    }
  }
}
